<template>
  <div class="w100 h100">
    <div style="width: 60%">
      <searchCondition ref="searchCondition" @getShiftInfo="getShiftInfo" />
    </div>
    <div class="changeShifts">
      <el-row class="h100" :gutter="20">
        <el-col class="h100" :span="11" :offset="0">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="blue-line">本值班次</span>
              <div>
                <el-button
                  v-show="showCurrentMemeber"
                  size="mini"
                  @click="onDuty"
                  >调整人员</el-button
                >
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="非本值人员无法交班"
                  :disabled="isShiftStaff"
                  :placement="'top'"
                >
                  <div style="display: inline-block; margin: 0 5px">
                    <el-button
                      v-show="showHandover"
                      type="primary"
                      size="mini"
                      @click="handover"
                      :disabled="!isShiftStaff"
                      >交班</el-button
                    >
                  </div>
                </el-tooltip>
              </div>
            </div>
            <div
              class="nullDiv"
              v-if="JSON.stringify(this.currentShift) == '{}'"
            >
              <span class="nullText"> 本值无人值班 </span>
            </div>
            <div class="nextDiv" v-else>
              <div class="text item">
                {{ "排班方案：" + allInfo.thisScheduleName }}
              </div>
              <div class="text item">
                {{ "值班班次：" + currentShift.name }}
              </div>
              <div class="text item">
                {{ "值班日期：" + currentShift.date }}
              </div>
              <div
                class="text item"
                v-for="(item, index) in currentShift.memberList"
                :key="index"
              >
                {{ item.memberType + "：" + item.memberName }}
              </div>

              <div class="text item">
                {{ "值班状态：" + currentShift.status }}
              </div>
            </div>
            <div
              style="text-align: right"
              v-if="
                allInfo.thisAutoSwitch != null &&
                JSON.stringify(allInfo) != '{}' &&
                allInfo
              "
            >
              交接班方式： {{ allInfo.thisAutoSwitch ? "自动" : "手动" }}
            </div>
          </el-card>
          <div class="onDuty-table" style="width: 100%">
            <div
              class="equipmentLog"
              v-if="
                shutdownLogList > 0 && JSON.stringify(this.currentShift) != '{}'
              "
            >
              <span class="text">未确认开停机日志：</span
              ><span @click="goShutdownPage" class="number"
                >{{ shutdownLogList }}条</span
              >
            </div>
            <shift-record
              v-show="adjustaffRecord.length != 0"
              :tableData="adjustaffRecord"
            ></shift-record>
          </div>
        </el-col>
        <el-col :span="2" class="h100">
          <span class="iconfont iconleftarrow arrow"></span>
        </el-col>
        <el-col :span="11" :offset="0">
          <!-- v-if="JSON.stringify(this.nextShift) != '{}'" -->
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span class="blue-line">下值班次</span>
              <div>
                <el-button size="mini" @click="revision" v-show="showNextMember"
                  >调整人员</el-button
                >
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="非下值人员无法接班"
                  :disabled="isNextShiftStaff"
                  :placement="'top'"
                >
                  <div style="display: inline-block; margin: 0 5px">
                    <el-button
                      v-show="showSucceed"
                      type="primary"
                      size="mini"
                      @click="succeed"
                      :disabled="!isNextShiftStaff"
                      >接班</el-button
                    >
                  </div>
                </el-tooltip>
              </div>
            </div>
            <div class="nullDiv" v-if="JSON.stringify(this.nextShift) == '{}'">
              <span class="nullText">
                暂无班次，<router-link
                  to="/operationManagement/runningSchedule/schedulePlan"
                  class="linkText"
                  >去排班</router-link
                >
              </span>
            </div>
            <div class="nextDiv" v-else>
              <div class="text item">
                {{ "排班方案：" + allInfo.nextScheduleName }}
              </div>
              <div class="text item">
                {{ "值班班次：" + nextShift.name }}
              </div>
              <div class="text item">
                {{ "值班日期：" + nextShift.date }}
              </div>
              <div
                class="text item"
                v-for="(item, index) in nextShift.memberList"
                :key="index"
              >
                {{ item.memberType + "：" + item.memberName }}
              </div>
              <div class="text item">
                {{ "值班状态：" + nextShift.status }}
              </div>
            </div>
            <div
              style="text-align: right"
              v-if="
                allInfo.nextAutoSwitch != null &&
                JSON.stringify(allInfo) != '{}' &&
                allInfo
              "
            >
              交接班方式： {{ allInfo.nextAutoSwitch ? "自动" : "手动" }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <dialogPublic
      :title="title"
      :show.sync="showMember"
      @doSubmit="addSeleteMember"
      width="30%"
      height="100px"
      @doClose="() => (showMember = false)"
    >
      <editForm
        :formConfig="memberConfig"
        ref="memberForm"
        :formData="memberFormData"
      ></editForm>
    </dialogPublic>
    <dialogPublic
      :title="ruleTitle"
      :show.sync="show"
      :showClose="false"
      :btnText="['下一步', '取消']"
      @doSubmit="nextStep"
      width="50%"
      height="600px"
      @doClose="() => (show = false)"
    >
      <div class="handover">
        <h3>交接班规则</h3>
        <ul>
          <li>
            <p class="item">
              <span>第一条 &nbsp;</span>
              值班人员应按规定时间进行交接班，并提前15分钟作好交接班准备工作，接班人员未到齐，不准交接班。
              特殊情况须经所在单位领导批准后，方可交接班，未办完交接手续前，不得擅离职守。
            </p>
          </li>
          <li>
            <p class="item">
              <span>第二条</span>
              在处理事故或进行倒闸操作时，不得进行交接班；交接时发生事故，停止交接班并由交班人员进行处理
              接班人员在交班班长指挥下协助工作。
            </p>
          </li>
          <li class="thirdRule">
            <span>第三条</span>
            <ul class="item">
              <li>交接班应交清下列内容，一般应为：</li>
              <li>1.系统或本站运行方式；</li>
              <li>2.保护和自动装置运行及变更情况；</li>
              <li>3.设备异常、事故处理、缺陷处理情况；</li>
              <li>4.倒闸操作及未完的操作指令；</li>
              <li>
                5.设备检修、试验情况，安全措施的布置，地线组编号及位置和使用中的工作票情况；
              </li>
              <li>6.其它；</li>
            </ul>
          </li>
          <li>
            <p class="item">
              <span>第四条 </span>
              交接时应做到全面交接、对口检查。
            </p>
          </li>
          <li>
            <p class="item">
              <span>第五条 </span>
              交接完毕后，双方值班人员在交接班记录薄上签名
            </p>
          </li>
        </ul>
        <div class="radioBtn">
          <el-radio v-model="radio" label="1">我已详细阅读交接班规则</el-radio>
        </div>
      </div>
    </dialogPublic>
  </div>
</template>

<script>
import {
  queryHandoverShift,
  adjustStaffMember,
  straightTakeover,
} from "@/api/operationManagement/handoverManagement.js";
import { queryOldStatusList } from "@/api/operationManagement/runLog.js";
import searchCondition from "./searchCondition.vue";
import shiftRecord from "./shiftRecord";
export default {
  components: {
    searchCondition,
    shiftRecord,
  },
  data() {
    return {
      title: "",
      ruleTitle: "",
      show: false,
      radio: false,
      showMember: false, //调整人员弹框
      memberConfig: {
        //录入基本信息
        labelWidth: "100px",
        itemArr: [
          {
            span: 22,
            label: "值班长",
            prop: "leaderName",
            propArr: "leaderUserArr",
            idsStr: "leaderId",
            type: "userOnly-select",
            option: [],
            isHide: true,
            required: false,
            multiple: false,
            methods: (data, formData) => {
              let member = data.map((item, index) => {
                let obj = {
                  staffName: item.name,
                  staffBy: item.id,
                  type: "0",
                };
                return obj;
              });
              this.$refs.memberForm.setFormItem("leaderList", member);
            },
          },
          {
            span: 22,
            label: "值班员",
            prop: "dutyName",
            propArr: "dutyArr",
            idsStr: "dutyId",
            type: "userOnly-select",
            option: [],
            isHide: true,
            required: false,
            multiple: true,
            methods: (data, formData) => {
              let member = data.map((item, index) => {
                let obj = {
                  staffName: item.name,
                  staffBy: item.id,
                  type: "2",
                };
                return obj;
              });
              this.$refs.memberForm.setFormItem("dutyList", member);
            },
          },
          {
            span: 22,
            label: "值守",
            prop: "guardName",
            propArr: "guardArr",
            idsStr: "guardId",
            type: "userOnly-select",
            option: [],
            isHide: true,
            multiple: true,
            required: false,
            methods: (data, formData) => {
              let member = data.map((item, index) => {
                let obj = {
                  staffName: item.name,
                  staffBy: item.id,
                  type: "1",
                };
                return obj;
              });
              this.$refs.memberForm.setFormItem("guardList", member);
            },
          },
          {
            span: 22,
            label: "值班领导",
            prop: "guidanName",
            propArr: "guidanArr",
            idsStr: "guidanId",
            type: "userOnly-select",
            defaultOrg: "",
            option: [],
            allowCreate: false,
            isHide: true,
            required: false,
            multiple: false,
            methods: (data, formData) => {
              let member = data.map((item, index) => {
                let obj = {
                  staffName: item.name,
                  staffBy: item.id,
                  type: "3",
                };
                return obj;
              });
              this.$refs.memberForm.setFormItem("guidanList", member);
              this.staffChange();
            },
          },
          {
            span: 22,
            label: "值班人员",
            prop: "memberName",
            propArr: "memberArr",
            idsStr: "memberId",
            type: "userOnly-select",
            defaultOrg: "",
            option: [],
            allowCreate: false,
            isHide: true,
            required: false,
            multiple: true,
            methods: (data, formData) => {
              let member = data.map((item, index) => {
                let obj = {
                  staffName: item.name,
                  staffBy: item.id,
                  type: "4",
                };
                return obj;
              });
              this.$refs.memberForm.setFormItem("memberList", member);
              this.staffChange();
            },
          },
          {
            span: 22,
            label: "调整原因",
            prop: "cause",
            type: "textarea",
            rows: 4,
            required: true,
          },
        ],
      },
      memberFormData: {},
      allInfo: {},
      currentShift: {},
      nextShift: {},
      adjustaffRecord: [],
      shutdownLogList: 0,
      searchData: {
        confirmDeptManage: this.$store.getters.currentOrgInfo.id,
        confirmDeptManageName: this.$store.getters.currentOrgInfo.name,
        isConfirm: [0],
      },
      query: {},
    };
  },
  computed: {
    //本值调整人员按钮
    showCurrentMemeber() {
      return (
        JSON.stringify(this.currentShift) != "{}" &&
        this.currentShift.status == "值班中" &&
        this.currentShift.blanked != 1
      );
    },
    //下值调整人员按钮
    showNextMember() {
      return (
        JSON.stringify(this.nextShift) != "{}" && this.nextShift.blanked != 1
      );
    },
    //交班按钮
    showHandover() {
      return (
        JSON.stringify(this.currentShift) != "{}" &&
        JSON.stringify(this.nextShift) != "{}" &&
        this.currentShift.status == "值班中" &&
        this.currentShift.blanked != 1 &&
        this.allInfo.thisAutoSwitch != 1
      );
    },
    //接班按钮
    showSucceed() {
      return (
        JSON.stringify(this.nextShift) != "{}" &&
        (this.currentShift.status == "已交班" ||
          JSON.stringify(this.currentShift) == "{}" ||
          this.currentShift.blanked == 1) &&
        this.nextShift.blanked != 1 &&
        this.allInfo.nextAutoSwitch != 1
      );
    },
    //是否本值人员
    isShiftStaff() {
      let userId = this.$store.getters.userInfo.id;
      if (this.allInfo.thisClassesShift) {
        let staffs = this.allInfo.thisClassesShift.staffs.map(
          (item) => item.staffBy
        );
        return staffs.includes(userId);
      } else {
        return false;
      }
    },
    //是否下值人员
    isNextShiftStaff() {
      let userId = this.$store.getters.userInfo.account;
      if (this.allInfo.nextClassesShift) {
        let staffs = this.allInfo.nextClassesShift.staffs.map(
          (item) => item.staffBy
        );
        return staffs.includes(userId);
      } else {
        return false;
      }
    },
  },
  watch: {
    onDutyTime: {
      handler(val, old) {
        this.onDutyTime = val;
      },
      immediate: true,
    },
  },
  mounted() {
    this.getShutdownList();
  },
  created() {
    /* 添加监听事件 */
    window.addEventListener("storage", this.getShiftInfo);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.getShiftInfo);
  },
  methods: {
    //获取班次信息
    async getShiftInfo(formData) {
      try {
        if (!formData || formData.deptName == undefined) {
          formData = await this.$refs.searchCondition.getFormData();
        }
        if (!formData.locationId && !formData.staffType) {
          this.$alert("请选择值班地点和值班人员类型", "", {
            confirmButtonText: "确定",
            center: true,
          });
        } else if (
          !formData.locationId &&
          formData.staffType &&
          formData.staffType != "3"
        ) {
          this.$alert("请选择值班地点,如无可选值班地点请前往排班", "", {
            confirmButtonText: "确定",
            center: true,
          });
        } else if (formData.locationId && !formData.staffType) {
          this.$alert("请选择值班人员类型", "", {
            confirmButtonText: "确定",
            center: true,
          });
        }
        let query = JSON.parse(JSON.stringify(formData));
        this.query = query;
        if (!query.locationId) {
          query.locationId = "-";
        }
        let res = await queryHandoverShift(query);
        //this.changeMemberForm(query);
        if (res.code == 200) {
          this.allInfo = res.data;
          this.currentShift = this.handleShiftInfo(res.data.thisClassesShift);
          this.nextShift = this.handleShiftInfo(res.data.nextClassesShift);
          this.adjustaffRecord = res.data.adjustRecords || [];
        }
      } catch (error) {
        console.log(error);
      }
    },
    //获取未确认的开停机日志
    async getShutdownList() {
      let res = await queryOldStatusList(this.searchData);
      this.shutdownLogList = res.data.total;
    },
    //前往开停机界面
    goShutdownPage() {
      this.$router.push({
        path: "/operationManagement/runLog/shutdownLog",
        query: this.searchData,
      });
    },
    //处理班次信息
    handleShiftInfo(shift) {
      let obj = {};
      if (shift) {
        obj.name = shift.name;
        obj.blanked = shift.blanked;
        let timeLength =
          (new Date(shift.endTime).getTime() -
            new Date(shift.startTime).getTime()) /
          (60 * 60 * 1000);
        obj.date = `${shift.startTime} 至 ${shift.endTime} (共${timeLength}小时)`;
        if (shift.blanked == 0) {
          obj.memberList = shift.staffs.map((item) => {
            let member = {
              memberType: this.$store.getters.fineDirtDataName(
                "operation_duty_type",
                item.type
              ),
              memberName: item.staffName,
            };
            return member;
          });
          obj.memberList = this.handleStaffInfo(shift.staffs);
          obj.status = this.$store.getters.fineDirtDataName(
            "operation_shift_status",
            shift.status
          );
        } else {
          obj.name = `${obj.name}(空白班)`;
          obj.memberList = [{ memberType: "值班员", memberName: "-" }];
          obj.status = "-";
        }
      }
      return obj;
    },
    //处理人员数据
    handleStaffInfo(staffs) {
      let list = [];
      let data = {};
      staffs.forEach((item, i) => {
        if (data[item.type] == undefined) {
          data[item.type] = item.staffName;
        } else {
          data[item.type] += `,${item.staffName}`;
        }
      });
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          list.push({
            memberType: this.$store.getters.fineDirtDataName(
              "operation_duty_type",
              key
            ),
            memberName: data[key],
          });
        }
      }
      return list;
    },
    //改变人员调整表单
    changeMemberForm(formData) {
      switch (formData.staffType) {
        case "0":
          this.memberConfig.itemArr[0].isHide = false;
          this.memberConfig.itemArr[1].isHide = false;
          this.memberConfig.itemArr[2].isHide = true;
          this.memberConfig.itemArr[3].isHide = true;
          this.memberConfig.itemArr[4].isHide = true;
          let leaderOption = this.getOptionData(
            this.memberFormData.leaderName,
            this.memberFormData.leaderId
          );
          let dutyOption = this.getOptionData(
            this.memberFormData.dutyName,
            this.memberFormData.dutyId
          );
          let dutyArr = this.memberFormData.dutyId
            ? this.memberFormData.dutyId.split(",")
            : [];
          setTimeout(() => {
            this.$refs.memberForm.setItemOption("leaderName", leaderOption);
            this.$refs.memberForm.setItemOption("dutyName", dutyOption);
            this.$refs.memberForm.setFormItem(
              "leaderUserArr",
              this.memberFormData.leaderId
            );
            this.$refs.memberForm.setFormItem("dutyArr", dutyArr);
          }, 500);
          break;
        case "1":
          this.memberConfig.itemArr[0].isHide = true;
          this.memberConfig.itemArr[1].isHide = true;
          this.memberConfig.itemArr[2].isHide = false;
          this.memberConfig.itemArr[3].isHide = true;
          this.memberConfig.itemArr[4].isHide = true;
          let guardOption = this.getOptionData(
            this.memberFormData.guardName,
            this.memberFormData.guardId
          );
          let guardArr = this.memberFormData.guardId
            ? this.memberFormData.guardId.split(",")
            : [];
          setTimeout(() => {
            this.$refs.memberForm.setItemOption("guardName", guardOption);
            this.$refs.memberForm.setFormItem("guardArr", guardArr);
          }, 500);
          break;
        case "2":
          this.memberConfig.itemArr[0].isHide = true;
          this.memberConfig.itemArr[1].isHide = false;
          this.memberConfig.itemArr[2].isHide = true;
          this.memberConfig.itemArr[3].isHide = true;
          this.memberConfig.itemArr[4].isHide = true;
          this.memberConfig.itemArr[1].required = false;
          let dutyOption1 = this.getOptionData(
            this.memberFormData.dutyName,
            this.memberFormData.dutyId
          );
          let dutyArr1 = this.memberFormData.dutyId
            ? this.memberFormData.dutyId.split(",")
            : [];
          setTimeout(() => {
            this.$refs.memberForm.setItemOption("dutyName", dutyOption1);
            this.$refs.memberForm.setFormItem("dutyArr", dutyArr1);
          }, 500);
          break;
        default:
          this.memberConfig.itemArr[0].isHide = true;
          this.memberConfig.itemArr[1].isHide = true;
          this.memberConfig.itemArr[2].isHide = true;
          this.memberConfig.itemArr[3].isHide = false;
          this.memberConfig.itemArr[4].isHide = false;
          let guidanOption = this.getOptionData(
            this.memberFormData.guidanName,
            this.memberFormData.guidanId
          );
          let memberOption = this.getOptionData(
            this.memberFormData.memberName,
            this.memberFormData.memberId
          );
          let memberArr = this.memberFormData.memberId
            ? this.memberFormData.memberId.split(",")
            : [];
          setTimeout(() => {
            this.$refs.memberForm.setItemOption("guidanName", guidanOption);
            this.$refs.memberForm.setItemOption("memberName", memberOption);
            this.$refs.memberForm.setFormItem(
              "guidanArr",
              this.memberFormData.guidanId
            );
            this.$refs.memberForm.setFormItem("memberArr", memberArr);
          }, 500);
          break;
      }
    },
    //交班
    handover() {
      if (this.shutdownLogList > 0) {
        this.$confirm("当前存在未确认的开停机日志，建议确认后再交班", "", {
          confirmButtonText: "继续交班",
          cancelButtonText: "去确认",
          distinguishCancelAndClose: true,
          type: "warning",
        })
          .then(() => {
            this.ruleTitle = "交班规则";
            this.show = true;
          })
          .catch((action) => {
            if (action === "cancel") {
              this.goShutdownPage();
            }
          });
      } else {
        this.ruleTitle = "交班规则";
        this.show = true;
      }
    },
    //阅读交班规则下一步
    nextStep() {
      if (!this.radio) {
        this.$alert("请仔细阅读交接班规则并勾选", "", {
          confirmButtonText: "确定",
          center: true,
        });
      } else {
        this.show = false;
        let type = this.ruleTitle == "交班规则" ? "交班" : "接班";
        let params = {
          shiftId: this.allInfo.thisClassesShift.id,
          nextShiftId: this.allInfo.nextClassesShift.id,
        };
        this.goDetailPage(params, "handoverDetails", type);
      }
    },
    //调整本值人员
    onDuty() {
      this.title = "调整本值人员";
      this.showMember = true;
      let formData = this.echoStaffData(this.allInfo.thisClassesShift.staffs);
      formData.shiftId = this.allInfo.thisClassesShift.id;
      formData.beforeStaffs = this.allInfo.thisClassesShift.staffs;
      this.memberFormData = formData;
      setTimeout(() => {
        this.changeMemberForm(this.query);
      }, 100);
    },
    //调整下值人员
    revision() {
      this.title = "调整下值人员";
      this.showMember = true;
      let formData = this.echoStaffData(this.allInfo.nextClassesShift.staffs);
      formData.shiftId = this.allInfo.nextClassesShift.id;
      formData.beforeStaffs = this.allInfo.nextClassesShift.staffs;
      this.memberFormData = formData;
      setTimeout(() => {
        this.changeMemberForm(this.query);
      }, 100);
    },
    getOptionData(nameStr, idStr) {
      let nameArr = nameStr ? nameStr.split(",") : [];
      let idArr = idStr ? idStr.split(",") : [];
      let option = [];
      nameArr.map((i, index) => {
        let item = {
          label: i,
          value: idArr[index],
          id: idArr[index],
          name: i,
        };
        option.push(item);
      });
      return option;
    },
    //回显人员数据
    echoStaffData(data) {
      let obj = {
        leaderList: [],
        dutyList: [],
        guardList: [],
        guidanList: [],
        memberList: [],
      };
      data.forEach((item) => {
        if (item.type == "0") {
          obj.leaderName = item.staffName;
          obj.leaderId = item.staffBy;
          obj.leaderList.push(item);
        } else if (item.type == "1") {
          if (obj.guardName == undefined) {
            obj.guardName = item.staffName;
            obj.guardId = item.staffBy;
          } else {
            obj.guardName += "," + item.staffName;
            obj.guardId += "," + item.staffBy;
          }
          obj.guardList.push(item);
        } else if (item.type == "2") {
          if (obj.dutyName == undefined) {
            obj.dutyName = item.staffName;
            obj.dutyId = item.staffBy;
          } else {
            obj.dutyName += "," + item.staffName;
            obj.dutyId += "," + item.staffBy;
          }
          obj.dutyList.push(item);
        } else if (item.type == "3") {
          if (obj.guidanName == undefined) {
            obj.guidanName = item.staffName;
            obj.guidanId = item.staffBy;
          } else {
            obj.guidanName += "," + item.staffName;
            obj.guidanId += "," + item.staffBy;
          }
          obj.guidanList.push(item);
        } else {
          if (obj.memberName == undefined) {
            obj.memberName = item.staffName;
            obj.memberId = item.staffBy;
          } else {
            obj.memberName += "," + item.staffName;
            obj.memberId += "," + item.staffBy;
          }
          obj.memberList.push(item);
        }
      });
      return obj;
    },
    //接班
    succeed() {
      if (!this.allInfo.thisClassesShift) {
        this.$confirm("本值班次无人值班，接班无需验证，是否直接接班", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            straightTakeover({
              nextShiftId: this.allInfo.nextClassesShift.id,
            }).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.description);
                this.getShiftInfo();
              }
            });
          })
          .catch((e) => {});
      } else if (this.allInfo.thisClassesShift.blanked == 1) {
        this.$confirm("本值班次为空白班，接班无需验证，是否直接接班", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            straightTakeover({
              thisShiftId: this.allInfo.thisClassesShift.id,
              nextShiftId: this.allInfo.nextClassesShift.id,
            }).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.description);
                this.getShiftInfo();
              }
            });
          })
          .catch((e) => {});
      } else {
        this.ruleTitle = "接班规则";
        this.show = true;
      }
    },
    //提交人员调整
    async addSeleteMember() {
      try {
        let data = [];
        let params = await this.$refs.memberForm.getFormData();
        data = data.concat(params.leaderList);
        data = data.concat(params.dutyList);
        data = data.concat(params.guardList);
        data = data.concat(params.guidanList);
        data = data.concat(params.memberList);
        params.afterStaffs = data;
        let members = data.map((item) => item.staffBy);
        if (data.length == 0) {
          this.$message.warning("值班人员不能为空");
        } else if (new Set(members).size != members.length) {
          this.$message.warning("值班人员不能重复，请重新选择");
        } else {
          let res = await adjustStaffMember(params);
          this.$message.success(res.description);
          this.getShiftInfo();
          this.showMember = false;
        }
      } catch (error) {
        console.log(error);
      }
    },
    //跳转到详情页
    goDetailPage(params, router, type) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          shiftId: params ? params.shiftId : "",
          nextShiftId: params ? params.nextShiftId : "",
          pageType: type ? type : "",
        },
      });
      window.open(href, "_blank");
    },
  },
};
</script>

<style lang="less">
.changeShifts {
  width: 100%;
  height: calc(100% - 62px);
  padding: 0 40px;
  overflow: auto;
  .memberSelect {
    margin-top: 50px;
  }
  .onDuty-table {
    width: 100%;
    margin-top: 20px;
    .equipmentLog {
      margin-bottom: 50px;
      text-align: left;
      .text {
        color: #f5a030;
      }
      .number {
        color: #11acf0;
        cursor: pointer;
      }
    }
  }
  .text {
    text-align: left;
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .line {
    margin: 4px;
  }
  .arrow {
    display: inline-block;
    min-height: 320px;
    font-size: 60px;
    color: #71a6ff;
    padding-top: 130px;
    width: 100%;
    text-align: center;
  }
  .blue-line {
    font-size: 16px;
    font-weight: 600;
  }
  .blue-line:before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 16px;
    background: #0970d6;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
  }
  .clearfix {
    height: 30px;
    display: flex;
    justify-content: space-between;
  }
  .nullDiv {
    height: 232px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    .nullText {
      font-size: 14px;
    }
  }
  .nextDiv {
    height: 262px;
  }
}
.linkText {
  color: #2c77f4;
}
.handover {
  padding: 10px 20px;
  .item {
    text-align: left;
  }
  .thirdRule {
    display: flex;
    ul {
      margin-left: 10px;
    }
  }
  .radioBtn {
    text-align: left;
    margin: 50px 0 10px 0;
  }
}
</style>